<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Imaginer零代码平台</title>
	<link rel="icon" href="./assets/img/zerocode_logo.png" sizes="16x16" type="image/png">
	<link rel="stylesheet" href="./assets/css/style.css">

	<!-- <script src="./assets/lib/bootstrap/bootstrap.bundle.min.js"></script> -->
	<!-- <link rel="stylesheet" href="./assets/lib/bootstrap/bootstrap.min.css"> -->

	<style>
		* {
			font-weight: 400;
		}

		body {
			font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
			font-size: 14px;
			color: #000;
			margin: 0;
			padding: 0;
			overflow-x: hidden;
		}

		/* 首页大轮播图 */
		.news-swiper {
			overflow-x: hidden;
		}

		/* 大轮播图容器 */
		#BigContainer {
			width: 100%;
			overflow-x: hidden;
			position: relative;
		}

		/* 大轮播图幻灯片 */
		#BigContainer>.swiper-wrapper>.swiper-slide {
			text-align: center;
			cursor: pointer;
		}

		/* 大轮播图幻灯片中文字 */
		#BigContainer>.swiper-wrapper>.swiper-slide>p {
			position: relative;
			top: -30px;
			color: #fff;
		}

		#BigContainer>.swiper-wrapper>.swiper-slide>div {
			width: 100%;
			height: 25vw;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
		}

		/* ********** 下面是动画效果 ********** */
		.hoverToSmall,
		.hoverToLarge,
		.hoverToSLarge {
			transition-duration: 0.4s;
			transition-timing-function: cubic-bezier(0.22, 0.02, 0, 1.41);
		}

		.hoverToLarge:hover {
			transform: scale(1.1);
		}

		.hoverToSLarge:hover {
			transform: scale(1.03);
		}
	</style>
</head>

<body style="overflow-y: scroll;">
	<!-- ---------------------------头部内容---------------------------------------------------- -->
	<div class="header">
		<div class="header-container">
			<div class="head-logo">
				<img id='logoImg' src="./assets/img/Imaginer.svg" style="height: 70px; width: 90px; cursor: pointer;"
					onclick="location.href='./index.html'" />
			</div>
			<div class='nav_container'>
				<div class="nav">
					<!-- 通用模块部分-->
					<div class="nav-item">
						<a class="nav-link" href="/">
							<nobr>网站首页</nobr>
						</a>
					</div>
					<div class="nav-item">
						<a class="nav-link" href="/module_market.html">
							<nobr>模块商城</nobr>
						</a>
					</div>
					<div class="nav-item">
						<a class="nav-link" href="./quick_start.html">
							<nobr>快速使用</nobr>
						</a>
					</div>
					<div class="nav-item">
						<a class="nav-link" href="http://zps-club.only4.work/">
							<nobr>零代码社区</nobr>
						</a>
					</div>
				</div>
			</div>
			<div>
				<div id="work-btn" onclick="location.href='http://zps-proj.only4.work/project'">
					工作台
				</div>
			</div>
		</div>
	</div>

	<style>
		#background-container {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100vh;
			z-index: -1;
			background-image: url(./assets/img/background.jpg);
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
		}
	</style>
	<div id="container">

		<style>
			#background-container {
				position: fixed;
				left: 0;
				top: 0;
				width: 100%;
				height: 100vh;
				z-index: -1;
				background-image: url(./assets/img/background.jpg);
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
			}
		</style>

		<style>
			#TODO {
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 70vh;
				font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, \5fae\8f6f\96c5\9ed1, Arial, sans-serif;
				padding-top: 200px;
			}

			#TODO>span {
				animation: bounce-7fe5028a .5s cubic-bezier(0, .43, .26, .98) infinite alternate;
				font-size: 48px;
				color: #fff;
			}

			#TODO>span:nth-child(1) {
				animation-delay: 0s;
			}

			#TODO>span:nth-child(2) {
				animation-delay: .1s;
			}

			#TODO>span:nth-child(3) {
				animation-delay: .2s;
			}

			#TODO>span:nth-child(4) {
				animation-delay: .3s;
			}


			@keyframes bounce-7fe5028a {
				0% {
					transform: translate(0);
				}

				100% {
					transform: translateY(-1em);
				}
			}
		</style>

		<div id="container">
			<div id="background-container"></div>
			<div id="TODO"><span>敬</span><span>请</span><span>期</span><span>待</span></div>
		</div>

</body>

</html>